<template>
  <page-header-wrapper>
    <a-card>
      <h3>加贷明细</h3>
      <a-table rowKey="id" :columns="columns" :data-source="data">
        <span slot="applyDate" slot-scope="applyDate"> {{ humanizeDate(applyDate) }}</span>
        <span slot="preLoanDate" slot-scope="preLoanDate"> {{ humanizeDate(preLoanDate) }}</span>
        <span slot="principal" slot-scope="principal"> {{ moneyType(principal) }}</span>
        <span slot="capital" slot-scope="capital"> {{ moneyType(capital) }}</span>
        <span slot="workDate" slot-scope="_, record">
          <LoanDate :record="record" />
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment'
import { getAddLoan } from '@/api/common'
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '加贷本金金额',
    dataIndex: 'principal',
    key: 'principal',
    scopedSlots: { customRender: 'principal' }
  },
  {
    title: '加贷资金成本',
    dataIndex: 'capital',
    key: 'capital',
    scopedSlots: { customRender: 'capital' }
  },
  {
    title: '加贷用途',
    dataIndex: 'usage',
    key: 'usage'
  },
  {
    title: '加贷申请日期',
    dataIndex: 'applyDate',
    key: 'applyDate',
    scopedSlots: { customRender: 'applyDate' }
  },
  {
    title: '加贷出借人手续费(%)',
    dataIndex: 'rate',
    key: 'rate'
  },
  {
    title: '预计放款时间',
    dataIndex: 'preLoanDate',
    key: 'preLoanDate',
    scopedSlots: { customRender: 'preLoanDate' }
  }
  // {
  //   title: '生效日期',
  //   dataIndex: 'workDate',
  //   key: 'workDate',
  //   scopedSlots: { customRender: 'workDate' }
  // }
]
export default {
  name: 'Add',
  data() {
    return {
      data: []
    }
  },
  components: {
    LoanDate: () => import('./com/LoanDate.vue')
  },
  computed: {
    columns() {
      if (this.$auth('agreementList.update')) {
        return [
          ...columns,
          {
            title: '生效日期',
            dataIndex: 'workDate',
            key: 'workDate',
            scopedSlots: { customRender: 'workDate' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async getData() {
      const form = {
        approve: 2,
        asseApprove: 2,
        projectId: this.$route.query.id
      }
      const res = await getAddLoan(form)
      // console.log(res.result.data.list)
      this.data = res.result.data.list
    }
  }
}
</script>
<style scoped></style>
